<template>
  <div class="Quotatuonari">
    <div class="el-input-til">
      <input autocomplete="off" placeholder="请输入标题" type="text" rows="2" validateevent="true" class="el-input__inner">
    </div>
    <div class="video-band">
      <div class="fun-title" style="border: none;" @click="showFun=!showFun;showVideo=false;iss1(showFun)">
        <div class="title-left">
          <i class="el-icon-minus" v-html="iss(showFun)"></i>
          <span>需求沟通</span>
        </div>
      </div>
      <div class="fun-title" @click="showVideo=!showVideo" v-if="showFun">
        <div class="title-left" style="font-size: 14px; font-weight: 500; margin-left: 44px;">
          <i class="el-icon-plus" v-html="iss(showVideo)"></i>
          <span>活动需求表</span>
        </div>
      </div>
      <div class="body-stlye" v-if="showVideo">
        <form class="el-form demo-ruleForm">
          <div class="el-form-item is-required">
            <label class="el-form-item__label">客户名称</label>
            <div class="el-form-item__content">
              <div class="el-textarea">
                <textarea type="textarea" rows="1" autocomplete="off" validateevent="true" class="el-textarea__inner"></textarea>
              </div>
            </div>
          </div>
          <div class="el-form-item">
            <label class="el-form-item__label">客户角色</label>
            <div class="el-radio-group">
              <label class="el-radio-button el-radio-button-left" :class="s1" @click="cs1">
                <input type="radio" class="el-radio-button__orig-radio" value="主办方">
                <span class="el-radio-button__inner">主办方</span>
              </label>
              <label class="el-radio-button el-radio-button-mid" :class="s2" @click="cs2">
                <input type="radio" class="el-radio-button__orig-radio" value="承办方">
                <span class="el-radio-button__inner">承办方</span>
              </label>
              <label class="el-radio-button el-radio-button-right" :class="s3" @click="cs3">
                <input type="radio" class="el-radio-button__orig-radio" value="代理商">
                <span class="el-radio-button__inner">代理商</span>
              </label>
            </div>
          </div>
          <div class="el-form-item is-required">
            <label class="el-form-item__label">活动主题</label>
            <div class="el-form-item__content">
              <div class="el-textarea">
                <textarea type="textarea" rows="1" autocomplete="off" validateevent="true" class="el-textarea__inner"></textarea>
              </div>
            </div>
          </div>
          <div class="el-form-item">
            <label class="el-form-item__label">活动简介</label>
            <div class="el-form-item__content">
              <div class="el-textarea">
                <textarea type="textarea" rows="1" autocomplete="off" validateevent="true" class="el-textarea__inner"></textarea>
              </div>
            </div>
          </div>
          <div class="el-form-item is-required">
            <label class="el-form-item__label">活动时间</label>
            <div class="el-form-item__content">
                <input autocomplete="off" type="text" class="el-input__inner">
                <i class="el-input__icon el-icon-time">-</i>
                <input autocomplete="off" type="text" class="el-input__inner">
            </div>
          </div>
          <div class="el-form-item">
            <label class="el-form-item__label" >参会规模</label>
            <div class="el-form-item__content" >
              <div class="el-textarea">
                <textarea rows="1"></textarea>
              </div>
            </div>
          </div>
          <div>
            <div class="info-title">=== 主会场 ===</div>
            <div class="el-form-item is-required">
              <label class="el-form-item__label" >会场地点</label>
              <div class="el-form-item__content" >
                <div class="el-textarea">
                  <textarea type="textarea" rows="1" autocomplete="off" validateevent="true" class="el-textarea__inner"></textarea>
                </div>
              </div>
            </div>
            <div class="el-form-item">
              <label class="el-form-item__label" >会场情况</label>
              <div class="el-form-item__content" >
                <div class="el-textarea">
                  <textarea type="textarea" rows="1" autocomplete="off" validateevent="true" class="el-textarea__inner"></textarea>
                </div>
              </div>
            </div>
            <div class="el-form-item">
              <label class="el-form-item__label" >会议设备</label>
              <div class="el-form-item__content" >
                <div class="el-textarea">
                  <textarea type="textarea" rows="1" autocomplete="off" validateevent="true" class="el-textarea__inner"></textarea>
                </div>
              </div>
            </div>
            <div class="el-form-item">
              <label class="el-form-item__label" >PPT大屏播</label>
              <div class="el-form-item__content" >
                <div class="el-textarea">
                  <textarea type="textarea" rows="1" autocomplete="off" validateevent="true" class="el-textarea__inner"></textarea>
                </div>
              </div>
            </div>
            <div class="el-form-item">
              <label class="el-form-item__label" >远程连线</label>
              <div class="el-form-item__content" >
                <div class="el-textarea">
                  <textarea type="textarea" rows="1" autocomplete="off" validateevent="true" class="el-textarea__inner"></textarea>
                </div>
              </div>
            </div>
            <div class="el-form-item">
              <label class="el-form-item__label" >摄像导播</label>
              <div class="el-form-item__content" >
                <div class="el-textarea">
                  <textarea type="textarea" rows="1" autocomplete="off" validateevent="true" class="el-textarea__inner"></textarea>
                </div>
              </div>
            </div>
            <div class="el-form-item">
              <label class="el-form-item__label" >网络情况</label>
              <div class="el-form-item__content" >
                <div class="el-textarea">
                  <textarea type="textarea" rows="1" autocomplete="off" validateevent="true" class="el-textarea__inner"></textarea>
                </div>
              </div>
            </div>
            <div class="el-form-item">
              <label class="el-form-item__label" >供电情况</label>
            <div class="el-form-item__content" >
              <div class="el-textarea">
                <textarea  type="textarea" rows="1" autocomplete="off" validateevent="true" class="el-textarea__inner"></textarea>
              </div>
            </div>
            </div>
            <div class="el-form-item">
              <label class="el-form-item__label" >彩排要求</label>
              <div class="el-form-item__content" >
                <div class="el-textarea">
                  <textarea type="textarea" rows="1" autocomplete="off" validateevent="true" class="el-textarea__inner"></textarea>
                </div>
              </div>
            </div>
            <div class="el-form-item">
              <label class="el-form-item__label" >交通食宿</label>
              <div class="el-form-item__content" >
                <div class="el-textarea">
                  <textarea  type="textarea" rows="1" autocomplete="off" validateevent="true" class="el-textarea__inner"></textarea>
                </div>
              </div>
            </div>
            <div class="el-form-item">
              <label class="el-form-item__label" >其它需求</label>
              <div class="el-form-item__content" >
                <div class="el-textarea">
                  <textarea  type="textarea" rows="1" autocomplete="off" validateevent="true" class="el-textarea__inner"></textarea>
                </div>
              </div>
            </div>
          </div>
          <div class="add-record">+ 增加分会场</div>
          <div class="sub-meeting">
            <div class="info-title">=== 分会场 ===</div>
            <div class="el-form-item">
              <label class="el-form-item__label" >平台功能</label>
              <div class="el-form-item__content" >
                <div class="el-textarea">
                  <textarea type="textarea" rows="1" autocomplete="off" validateevent="true" class="el-textarea__inner"></textarea>
                </div>
              </div>
            </div>
            <div class="el-form-item">
              <label class="el-form-item__label" >人员设备</label>
              <div class="el-form-item__content" >
                <div class="el-textarea">
                  <textarea  type="textarea" rows="1" autocomplete="off" validateevent="true" class="el-textarea__inner"></textarea>
                </div>
              </div>
            </div>
            <div class="el-form-item">
              <label class="el-form-item__label" >宣传推广</label>
              <div class="el-form-item__content" >
                <div class="el-textarea">
                  <textarea type="textarea" rows="1" autocomplete="off" validateevent="true" class="el-textarea__inner"></textarea>
                </div>
              </div>
            </div>
            <div class="el-form-item">
              <label class="el-form-item__label" >后期服务</label>
              <div class="el-form-item__content" >
                <div class="el-textarea">
                  <textarea type="textarea" rows="1" autocomplete="off" validateevent="true" class="el-textarea__inner"></textarea>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="video-band">
      <div class="fun-title" @click="showPrice=!showPrice">
        <div class="title-left">
          <i class="el-icon-minus" v-html="iss(showPrice)"></i>
          <span>提供报价</span>
        </div>
      </div>
      <div class="body-stlye" style="" v-if="showPrice">
        <div>
          <div class="fun-remind" style="font-weight: 700;color: #4b4b4b">
      <span>要求：</span>
    </div>
          <div class="fun-remind" style="font-size: 15px;color: #2c3e50"> 1）请尽量使用
      <span style="color: blue;">《活动报价表》</span>或
      <span style="color: blue;">《产品报价表》</span>生成报价单
    </div>
          <div class="fun-remind" style="font-size: 15px;color: #2c3e50">
      2）如需在线报价无法满足需求，请采用办公网上Excel版报价表
    </div>
        </div>
        <div class="upload-demo" style="margin: 22px 6%;">
      <div class="el-upload el-upload--text">
        <button type="button" class="el-button el-icon-upload el-button--primary el-button--medium">
          <span>上传活动报价</span>
        </button>
        <input type="file" name="file" class="el-upload__input">
      </div>
      <div class="el-upload__tip">上传活动报价表</div>
      <ul class="el-upload-list el-upload-list--text"></ul>
    </div> <div class="upload-demo" style="margin: 22px 6%;">
      <div class="el-upload el-upload--text">
        <button type="button" class="el-button el-icon-upload el-button--primary el-button--medium">
          <span>上传产品报价</span>
        </button>
        <input type="file" name="file" class="el-upload__input">
      </div>
      <div class="el-upload__tip">上传产品报价表</div>
      <ul class="el-upload-list el-upload-list--text"></ul>
    </div>
    </div>
    </div>
    <div class="video-band">
      <div class="fun-title" @click="showCat=!showCat">
        <div class="title-left">
          <i class="el-icon-minus" v-html="iss(showCat)"></i>
          <span>提供合同</span>
        </div>
      </div>
      <div class="body-stlye" style="" v-if="showCat">
        <div>
          <div class="fun-remind" style="font-weight: 700;">
      要求：
    </div>
          <div class="fun-remind"> 1）请尽量使用
      <span style="color: blue;">《活动报价表》</span>或
      <span style="color: blue;">《产品报价表》</span>生成合同
    </div>
          <div class="fun-remind">
      2）如在线合同模板无法满足，请采用办公网上Word版合同模板。
    </div>
          <div class="upload-demo" style="margin: 22px 6%;">
            <div class="el-upload el-upload--text">
              <button type="button" class="el-button el-icon-upload el-button--primary el-button--medium">
                <span>上传合同附件</span>
              </button>
              <input type="file" name="file" class="el-upload__input">
            </div>
            <div class="el-upload__tip" style="color: red;">注：如不上传合同附件，特别说明栏目必须填息理由。</div>
            <ul class="el-upload-list el-upload-list--text"></ul>
          </div>
          <div class="fun-remind" style="font-weight: 700;">
      特别说明：
      <div class="el-textarea" style="margin-top: 10px;">
        <textarea placeholder="" type="textarea" rows="3" autocomplete="off" validateevent="true" class="el-textarea__inner"></textarea>
      </div>
          </div>
          <div class="fun-remind" style="font-weight: 700; color: red;">
      注意事项：
    </div>
          <div class="fun-remind" style="font-size: 13px !important;">
      1）提交合同：要求上传盖章合同才派单，特殊情况可提交报价单，做说明
    </div>
          <div class="fun-remind" style="font-size: 13px;">
      2） 付款方式：
    </div>
          <div class="fun-remind" style="font-size: 13px !important;">
            <i class="el-icon-check"></i> 民企、国企：订单额6000元内的要求直播前付全款；超过1万可直播前付60%定金，如提前付全款总价可打9折。
    </div>
          <div class="fun-remind" style="font-size: 13px;">
            <i class="el-icon-check"></i> 大型国企、政府机构: 可后付款，但执行前要先签订合同。
    </div>
          <div class="fun-remind" style="font-size: 13px !important;">3）关于垫资：
            <span>如需我方垫资购买相关设备或投放宣传费用，一律不垫资，建议甲方办事员个人或销售员自行判断风险垫资，合同到位后退还垫资款；特殊情况报请公司高层审批。</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from "../router/eventBus"
import bottomButon from "./bottomButon";
export default {
  name: "Quotationari",
  components:{
    bottomButon
  },
  data(){
    return{
      s1:'isActive',
      s2:'',
      s3:'',
      showVideo:false,
      showFun:false,
      showPrice:false,
      showCat:false

    }
  },
  methods:{
    iss:function (ss){
      if (ss){
      return '-'
      }else {
        return '+'
      }
    },
    cs1:function(){
      this.s1='isActive';
      this.s2='';
      this.s3=''
    },
    cs2:function(){
      this.s1='';
      this.s2='isActive';
      this.s3=''
    },
    cs3:function(){
      this.s1='';
      this.s2='';
      this.s3='isActive';
    }
  },
  mounted(){
    bus.$on('save',()=>{
      console.log('被按钮调用了')
    })
  }
}
</script>

<style scoped>

</style>
